<template>
  <div class="index">
    <div class="head">
      <ElDescriptions class="margin-top" title="考研资料分享系统">
        <template #extra>
          <div class="person">
            <ElDropdown>
              <template #trigger>
                <img src="../img/user2.jpg" style="width: 40px; height: 40px" />
              </template>
              <template #content>
                <ElDropdownMenu>
                  <ElDropdownItem @click="gopersonal">个人中心</ElDropdownItem>
                  <ElDropdownItem @click="backlogin">退出登录</ElDropdownItem>
                </ElDropdownMenu>
              </template>
            </ElDropdown>
          </div>
        </template>
      </ElDescriptions>
    </div>
    <div class="handle">
      <ElMenu class="el-menu-demo" mode="horizontal" :default-active="activeIndex" router>
        <ElSubMenu index="0">
          <template #title>
            <i class="el-icon-notebook-2"></i>考研科目列表
          </template>
          <ElSubMenu v-for="(value, key, indexz) in subjectlist" :key="indexz" :index="(indexz + 1).toString()">
            <template #title>{{ key }}</template>
            <ElMenuItem v-for="(item, indexj) in value" :key="indexj" :index="`/filelist?id=${item.id}`">
              {{ item.name }}
            </ElMenuItem>
          </ElSubMenu>
        </ElSubMenu>
        <ElMenuItem @click="tschool">
          <i class="el-icon-s-order"></i>
          院校资料
        </ElMenuItem>
        <ElMenuItem index="/oneword">
          <i class="el-icon-edit"></i>每日一句
        </ElMenuItem>
      </ElMenu>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useCookies } from '@vueuse/integrations/useCookies';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElDescriptions, ElDropdown, ElDropdownMenu, ElDropdownItem, ElMenu, ElSubMenu, ElMenuItem } from 'element-plus';

const { get, remove } = useCookies(['uid']);
const router = useRouter();
const userId = ref(get('uid'));
const subjectlist = ref({});
const activeIndex = ref('/oneword');

// 院校资讯
const tschool = async () => {
  try {
    const result = await axios.get(`/ky/user/getOne?id=${userId.value}`);
    const school = result.data.data.tschool;
    if (school === "中山大学") {
      window.open("http://www.sysu.edu.cn/", '_blank');
    } else if (school === "北京大学") {
      window.open("https://www.pku.edu.cn/", '_blank');
    } else {
      window.open("https://yz.chsi.com.cn/", '_blank');
    }
  } catch (error) {
    console.error('请求出错:', error);
  }
};

// 获取科目列表
const getjubjectList = async () => {
  try {
    const result = await axios.get('/ky/user/subjectlist');
    subjectlist.value = result.data.data;
  } catch (error) {
    console.error('获取科目列表出错:', error);
  }
};

const gopersonal = () => {
  router.push('/personal');
};

const backlogin = () => {
  router.push('/');
  remove('uid');
};

onMounted(() => {
  getjubjectList();
});
</script>

<style scoped>
.head {
  margin-top: 0px;
  width: 100%;
  height: 50px;
  background-color: rgb(126, 170, 172);
}

.span {
  color: black;
  font-weight: 900;
  margin-left: 15px;
  font-size: 25px;
}

.person {
  margin-right: 20px;
  width: 40px;
  height: 40px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.handle {
  margin-top: 10px;
}
</style>